<template>
  <div id="addmenu_id">
    <el-dialog title="提示" :visible.sync="isShow.flig">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="上级菜单" prop="pid">
          <el-select v-model="ruleForm.pid" placeholder="请选择上级菜单">
            <el-option label="顶级菜单" :value="0"></el-option>
            <el-option v-for="m in menu_list" :key="m.id" :label="m.title" :value="m.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="菜单目录" prop="type">
          <el-radio-group v-model="ruleForm.type">
            <el-radio :label="1">目录</el-radio>
            <el-radio :label="2">菜单</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="菜单名称" prop="title">
          <el-input v-model="ruleForm.title"></el-input>
        </el-form-item>

        <el-form-item label="菜单地址" v-if="ruleForm.type !=1 ? true:false" prop="url">
          <el-input v-model="ruleForm.url"></el-input>
        </el-form-item>

        <el-form-item label="菜单图标" v-if="ruleForm.type !=2 ? true:false" prop="icon">
          <el-input v-model="ruleForm.icon"></el-input>
        </el-form-item>

        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="ruleForm.status">
            <el-radio :label="1">正常</el-radio>
            <el-radio :label="0">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="close_menu">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ruleForm: {
        id:0,
        pid: 0,
        type: 1,
        title: "",
        url: "",
        icon: "",
        status: 1
      },
      rules: {}
    };
  },
  methods: {
    close_menu(){
       this.ruleForm = {
            pid: 0,
            type: 1,
            title: "",
            url: "",
            icon: "",
            status: 1
          };
           this.isShow.flig =false
      
    },
      setFore(obj){
          this.ruleForm = {...obj}
      },
    submit() {
        var url =''
        if(this.ruleForm.id == 0){
            url='/menuadd'
        }else{
             url='/menuedit'
        }
      this.$http.post(url, this.ruleForm).then(res => {
        if (res.code == 200) {
         this.close_menu()
        }
        this.$emit('reload_list')
      });
    }
  },
  props: ["isShow",'menu_list']
};
</script>

<style>
.demo-ruleForm {
  text-align: left;
}
</style>